<template>
  <el-form label-position="right">
    <el-row>
      <el-col :span="24">
        <el-form-item prop="label" label="标签" :label-width="labelWidth">
          <el-input :value="label" @input="handleLabel" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="type" label="类型" :label-width="labelWidth">
          <dictionary-select
            group="CONTROL"
            width="100%"
            :value="type"
            @input="handleType"
          />
        </el-form-item>
        <el-form-item
          v-if="type === 'dictionary'"
          prop="group"
          label=""
          :label-width="labelWidth"
        >
          <dictionary-group-select :value="group" @input="handleGroup" />
        </el-form-item>
        <el-form-item
          v-if="type === 'advance'"
          prop="control"
          label="组件"
          :label-width="labelWidth"
        >
          <el-input :value="control" @input="handleControl" />
        </el-form-item>
        <el-form-item
          v-if="type === 'advance'"
          prop="preset"
          label="预设值"
          :label-width="labelWidth"
        >
          <object-input :value="preset" @input="handlePreset" />
        </el-form-item>
      </el-col>
      <template>
        <el-col :span="24">
          <el-form-item prop="name" label="字段" :label-width="labelWidth">
            <el-input :value="name" @input="handleName" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="value" label="默认值" :label-width="labelWidth">
            <el-input :value="defaultValue" @input="handleDefaultValue" />
          </el-form-item>
        </el-col>
      </template>
      <el-col :span="24">
        <el-form-item prop="hidden" label="显示" :label-width="labelWidth">
          <el-switch :value="!hidden" @input="handleHidden" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import DictionarySelect from "../../basic/DictionarySelect.vue";
import DictionaryGroupSelect from "../../advance/DictionaryGroupSelect.vue";
import ObjectInput from "../../basic/ObjectInput.vue";
import BoxMixin from "../box.mixin";
export default {
  name: "FilterAttributeEditor",
  components: {
    DictionarySelect,
    DictionaryGroupSelect,
    ObjectInput
  },
  mixins: [BoxMixin]
};
</script>

<style lang="scss" scoped></style>
